<template>
  <div :class="['chat-cell', isGroupMsg ? 's-padding-top' : '']">
    <div
      :class="['chat-content', isSend ? 'send-bg' : 'revice-bg']"
      v-if="!item.isLoading"
    >
      <div v-show="item.title && item.title.length > 0">
        {{ item.title }}
      </div>

      <div class="message-content">
        <div v-if="item.messageType === 'FIRST_PROMPT_QUESTION'" class="firt-prompt-tip">
          为了收集以上信息，可以参考如下问题向客户提问哦：
        </div>
        <markdown :content="item.content" />
      </div>

      <div class="chat-products" v-show="showProducts">
        <div v-for="item in cp_products" :key="item">
          <van-popover
            v-model:show="showMorePopover"
            :actions="cp_otherProducts"
            @select="onSelectProductsItem"
            v-if="item.type == 'other'"
          >
            <template #reference>
              <div class="chat-product-item">
                {{ item.name }}
                <van-icon name="arrow-down" style="margin-left: 4px" />
              </div>
            </template>
          </van-popover>
          <div v-else class="chat-product-item" @click="onSelectProductsItem(item)">
            {{ item.name }}
          </div>
        </div>
      </div>
      <div
        class="flex flex-row align-middle justify-center mt-4 mb-4"
        v-show="allowChange"
        @click="onRefreshPrompt"
      >
        <img src="../../../icons/svg//productAssistant/refresh.svg" />
        <p class="text-sm ml-2" style="color: #595959">换一批</p>
      </div>
    </div>
    <followUp
      v-else-if="item.messageType === 'follow_up'"
      :context="item.content + item.messageType"
    />
    <div :class="['chat-content', 'revice-bg']" v-else>
      正在思考
      <div class="dot dot-1"></div>
      <div class="dot dot-2"></div>
      <div class="dot dot-3"></div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
import { useProductStore } from "@/store";
import markdown from "@/components/markdown.vue";
import followUp from "./followUp.vue";

const props = defineProps({
  item: {
    type: Object,
  },
});
const store = useProductStore();
const showMorePopover = ref(false);
const emit = defineEmits(["onSelectItem"]);

const isSend = computed(() => {
  return props.item.messageDirection === "send";
});

const showProducts = computed(() => {
  return store.currentStepType === "chooseCategory" && props.item.isStart;
});

const allowChange = computed(() => {
  const messageType = props.item.messageType;
  return messageType === "FIRST_PROMPT_QUESTION" || messageType === "SEEK_PROMPT";
});

const isGroupMsg = computed(() => {
  const messageType = props.item.messageType;
  return messageType === "FIRST_PROMPT_QUESTION" || messageType === "SEEK_PROMPT";
});

const cp_products = computed(() => {
  if (!props.item.products) return null;
  const products = props.item.products;
  if (products.length <= 8) return props.item.products;
  let array = products.slice(0, 3);
  array.push({
    name: "其他",
    type: "other",
  });
  return array;
});

const cp_otherProducts = computed(() => {
  return props.item.products.slice(3).map((v) => {
    return { ...v, text: v.name };
  });
});

function onSelectProductsItem(item) {
  emit("onSelectItem", item);
}

function onRefreshPrompt() {
  store.refreshPrompt(props.item.messageType);
}
</script>

<style lang="less" scoped>
.chat-cell {
  background-color: transparent;
  padding: 10px 8px;
  font-size: 14px;
  color: #262626;
  position: relative;
  display: flex;
  flex-direction: column;
}

.s-padding-top {
  padding-top: 0;
}

.message-content {
  // white-space: pre-line;
}

.chat-content {
  box-sizing: border-box;
  padding: 12px 20px 12px 20px;
}

.firt-prompt-tip {
  color: #8c8c8c;
  font-size: 14px;
  line-height: 24px;
}

.chat-products {
  margin-top: 12px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 14px;

  .chat-product-item {
    width: 140px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 18px;
    margin-bottom: 12px;
    background-color: #f4f5f6;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #f4f5f6;
  }
}

.send-bg {
  border-radius: 12px 0 12px 12px;
  background-color: #bdd2ff;
  align-self: flex-end;
  width: auto;
}

.revice-bg {
  border-radius: 0 12px 12px 12px;
  background-color: white;
  align-self: flex-start;
}

.dot {
  opacity: 0;
  animation: fade 1.5s infinite;
  display: inline-block;
  width: 4px;
  height: 4px;
  background-color: #262626;
  border-radius: 2px;
  margin-right: 2px;
}

.dot-1 {
  animation-delay: 0s;
}

.dot-2 {
  animation-delay: 0.5s;
}

.dot-3 {
  animation-delay: 1s;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>
